<script>
import persistence from "@/store/persistence"
import { showModal, showToast, valIsEmpty } from "@/utils"
import request from "@/utils/request"
import numberUtils from "@/utils/numberUtils"
import pay from "@/utils/pay"
import popup from "@/components/popup/index.vue"
import shareInfo from "@/utils/shareInfo"
import urlUtils from "@/utils/urlUtils"
import popupPicker from "@/components/popupPicker/index.vue"
import settings from "@/utils/settings"

export default {
  name: "index",
  computed: {
    numberUtils() {
      return numberUtils
    },
  },
  components: {
    popup,
    popupPicker,
  },
  created() {
    request({
      url: settings.nginxUrlSuffix + "pageConfig/receiveResource.json",
      method: "get",
      errorHandle: true,
      showLoading: true,
      noAuth: true,
      origin: true,
    }).then(({ data }) => {
			console.log(data, "data")
      this.resourceList = data.withBindCommodity.resourceList
    })
  },
  data() {
    return {
      hasReceivedResource: persistence.userReceiveResource.get() || [],
      resourceList: [],
      currentSelectResourceIndex: "",
      persistence,
      commodityDetail: {
        commodityName: "",
        commodityPrice: "",
        commodityDesc: "",
        createTime: "",
        userId: "",
        isBuy: false,
        isReceive: false,
      },
      commodityId: "14",
      openIosPay: false,
      userSelectExam: persistence.userSelectExam.get(),
    }
  },
  onLoad() {
    this.getCommodityDetail()
    pay.checkIosPay().then((res) => {
      this.openIosPay = res
      if (!res) {
        showModal({
          title: "提示",
          content: "根据相关政策，ios不提供服务",
          showCancel: false,
        })
      }
    })
  },
  methods: {
    showModal,
    // 免费领取点击事件
    freeReceiveBtnClick() {
      if (valIsEmpty(this.currentSelectResourceIndex)) {
        showToast.default("请选择资料")
        return
      }
      this.hasReceivedResource.push(this.currentSelectResourceIndex)
      persistence.userReceiveResource.add(this.currentSelectResourceIndex)
      //发送请求，标识已经领过了
      request({
        url: "activityCommodityUserRecord/receiveCommodity",
        data: {
          commodityId: this.commodityId,
        },
      }).catch((err) => {
        console.log(err, "err")
      })
      this.commodityDetail.isReceive = true
      this.receiveResource(this.resourceList[this.currentSelectResourceIndex])
    },
    // 领取资源
    receiveResource(item) {
      let imageUrl = this.commodityDetail.isBuy
        ? "https://kou.gdzmtech.com/pic/c0d62242ca3735dd3bb1780d771aa84.png"
        : "https://kou.gdzmtech.com/pic/a8da2f219476c607699c04c5cdef114.png"
      this.$refs.popup.addPopupItem(imageUrl, () => {
        wx.setClipboardData({
          data: item.cloudFileSharingInfo.link,
          success: () => {
            showToast.default("复制成功")
          },
        })
      })
    },
    resourceItemClick(item, index) {
      //还未领取过资料
      if (!this.commodityDetail.isReceive) {
        this.currentSelectResourceIndex = index
        //领取过资料
      } else {
        //选中之前领取过的那个
        if (this.hasReceivedResource.includes(index)) {
          this.receiveResource(item)
          //弹出购买弹窗
        } else {
          this.showBuyingPopup()
        }
      }
    },
    //获取商品详情
    getCommodityDetail() {
      request({
        url: "activityCommodityUserRecord/getCommodityDetail",
        data: {
          id: this.commodityId,
        },
        errorHandle: true,
        showLoading: true,
      }).then((data) => {
        this.commodityDetail = data
      })
    },
    //下单
    takeOrder() {
      request({
        url: "activityCommodityUserRecord/buyCommodity",
        data: {
          commodityId: this.commodityId,
          commodityType: this.userSelectExam, // 用户选择的考试
        },
        showLoading: true,
        errorHandle: true,
      }).then((data) => {
        pay.handlePay(data).then(() => {
          //刷新购买状态
          this.getCommodityDetail()
        })
      })
    },
    //显示下单购买弹窗
    showBuyingPopup() {
      this.$refs.popup.addPopupItem("https://kou.gdzmtech.com/pic/b347a634e58df71379e739fb274c6c8.png")
    },
  },
  async onShareAppMessage() {
    return await shareInfo.getDefaultShareInfo({
      path: urlUtils.getCurrentPageUrl(),
      title: "点击免费领取资料",
      imageUrl: "https://kou.gdzmtech.com/pic/fJ8znpxPX4vNZZyfqF1U.png",
    })
  },
}
</script>

<template>
  <view class="page" v-if="openIosPay">
    <!--		购买了 29.9 的资料包之后-->
    <image class="title" mode="widthFix" src="https://kou.gdzmtech.com/pic/2TmPDPg6cZXFoFWskV5C.png" v-if="commodityDetail.isBuy"></image>
    <!--		还未领取之前-->
    <image
      class="title"
      src="https://kou.gdzmtech.com/pic/cERaQy8XxmD8NpEwGoLH.png"
      v-else-if="!commodityDetail.isReceive"
      mode="widthFix"
    ></image>
    <!--		领取了一个之后-->
    <image class="title" mode="widthFix" src="https://kou.gdzmtech.com/pic/FsKeY5DRmaaDv1THX0Vb.png" v-else></image>
    <view class="content">
      <!--					还未购买过-->
      <view class="resource-list-container" v-if="!commodityDetail.isBuy" :class="commodityDetail.isReceive ? 'short' : 'long'">
        <view class="resource-list">
          <!--				还未解锁-->
          <view class="resource-item" v-for="(item, index) in resourceList" :key="index" @click="() => resourceItemClick(item, index)">
            <image class="file-icon" src="https://kou.gdzmtech.com/pic/66989386a3783975da5eef83c14ea35.png" mode="widthFix"></image>

            <view class="text-container">
              <view class="title">{{ item.title }}</view>
              <!--						未领取资料时展示-->
              <view class="description" v-if="!commodityDetail.isReceive">点击免费领取该资料(限选)</view>
              <!--						已领取过的资料点击复制链接-->
              <view class="description" v-else-if="hasReceivedResource.includes(index)">点击复制链接至浏览器下载资料</view>
              <!--						已经领取过资料但未支付时资料锁住-->
              <view class="description" v-else>{{ `${numberUtils.fenToYuan(commodityDetail.commodityPrice)}元解锁全部资料` }}</view>
            </view>

            <!--						未领取资料时展示-->
            <checkbox :checked="currentSelectResourceIndex === index" color="#FF3131" v-if="!commodityDetail.isReceive"></checkbox>
            <!--						已领取过的资料点击复制链接-->
            <view class="copy-link-btn" v-else-if="hasReceivedResource.includes(index)">点击复制链接</view>
            <!--						已经领取过资料但未支付时资料锁住-->
            <view class="lock-icon-container" v-else>
              <image class="lock-icon" src="https://kou.gdzmtech.com/pic/98fedf9f023148d33ed5b6b7af9ff62.png" mode="widthFix"></image>
            </view>
          </view>
        </view>
      </view>
      <!--			已经购买过-->
      <template v-else>
        <view
          class="resource-hub-container"
          @click="() => receiveResource({ cloudFileSharingInfo: { link: 'https://docs.qq.com/doc/DZGhHaXZiSlRPc3Fv' } })"
        >
          <view class="content">
            <view class="icon-container">
              <image src="https://kou.gdzmtech.com/pic/a7ef33624a576abb3deff8c17da4835.png" class="icon" mode="widthFix"></image>
            </view>
            <view class="right">
              <view class="header">
                <view class="title">英语四六级资料包合集</view>
                <view class="copy-btn">点击复制链接</view>
              </view>
              <view class="info">
                <view class="item">
                  <image class="icon" src="https://kou.gdzmtech.com/pic/d83cc9ec2832f2c6fa6d72965f13c31.png" mode="widthFix"></image>
                  <view class="text">四六级高频700词</view>
                </view>

                <view class="item">
                  <image class="icon" src="https://kou.gdzmtech.com/pic/d83cc9ec2832f2c6fa6d72965f13c31.png" mode="widthFix"></image>
                  <view class="text">四六级翻译热点词汇</view>
                </view>

                <view class="item">
                  <image class="icon" src="https://kou.gdzmtech.com/pic/d83cc9ec2832f2c6fa6d72965f13c31.png" mode="widthFix"></image>
                  <view class="text">四级翻译必备词汇</view>
                </view>

                <view class="item">
                  <image class="icon" src="https://kou.gdzmtech.com/pic/d83cc9ec2832f2c6fa6d72965f13c31.png" mode="widthFix"></image>
                  <view class="text">四级高分范文10篇</view>
                </view>

                <view class="item">
                  <image class="icon" src="https://kou.gdzmtech.com/pic/d83cc9ec2832f2c6fa6d72965f13c31.png" mode="widthFix"></image>
                  <view class="text">六级作文常用100句</view>
                </view>

                <view class="item">
                  <image class="icon" src="https://kou.gdzmtech.com/pic/d83cc9ec2832f2c6fa6d72965f13c31.png" mode="widthFix"></image>
                  <view class="text">......</view>
                </view>
              </view>
            </view>
          </view>
          <view class="footer"> *点击复制链接领取全部资料 </view>
        </view>
        <view class="ad-banner-container">
          <!--					选择了四级时展示-->
          <image
            v-if="['四级', ''].includes(userSelectExam)"
            class="ad-banner"
            src="https://kou.gdzmtech.com/pic/b9ffb686ff3fe62834e61a42726121c.png"
            mode="widthFix"
            :show-menu-by-longpress="true"
          ></image>
          <!--					选择了六级时展示-->
          <image
            v-if="['六级', ''].includes(userSelectExam)"
            class="ad-banner"
            src="https://kou.gdzmtech.com/pic/j7wZn1LY2xCoGZje1qc7.png"
            mode="widthFix"
            :show-menu-by-longpress="true"
          ></image>
        </view>
      </template>
    </view>
    <template v-if="commodityDetail.isReceive">
      <!--		未付费且领过了资料时展示-->
      <image
        class="poster"
        mode="widthFix"
        src="https://kou.gdzmtech.com/pic/1188c767d4b18b807914dade53adb4b.png"
        v-if="!commodityDetail.isBuy"
        :show-menu-by-longpress="true"
      ></image>
      <!--		已经付过费了时展示-->
      <template v-else>
        <!--				四级-->
        <image
          class="poster"
          src="https://kou.gdzmtech.com/pic/72c65dea4928d8565d9491230168ce8.png"
          mode="widthFix"
          v-if="userSelectExam === '四级'"
          :show-menu-by-longpress="true"
        ></image>
        <!--				六级-->
        <image
          class="poster"
          v-else-if="userSelectExam === '六级'"
          src="https://kou.gdzmtech.com/pic/227d529aebef2b06cf0429be2a21c96.png"
          mode="widthFix"
          :show-menu-by-longpress="true"
        ></image>
      </template>
    </template>
    <view class="footer-btn">
      <view class="btn" v-if="!commodityDetail.isReceive" @click="freeReceiveBtnClick">免费领取</view>
      <template v-else-if="!commodityDetail.isBuy">
        <view class="btn" @click="() => $refs.examSelectPicker.open()">
          {{ `${numberUtils.fenToYuan(commodityDetail.commodityPrice)} 元解锁全部` }}
        </view>
        <!--        <view-->
        <!--          class="go-back-to-index btn"-->
        <!--          @click="-->
        <!--            () => {-->
        <!--              showModal({-->
        <!--                title: '提示',-->
        <!--                content: '确定要放弃领取全部资料吗？',-->
        <!--              }).then((boolean) => {-->
        <!--                if (boolean) {-->
        <!--                  $uni.reLaunch({ url: '/pages/index/index' })-->
        <!--                }-->
        <!--              })-->
        <!--            }-->
        <!--          "-->
        <!--          >回到首页</view-->
        <!--        >-->
      </template>
      <view class="go-back-to-index btn" v-else @click="() => $uni.reLaunch({ url: '/pages/index/index' })">回到首页</view>
    </view>
    <popup ref="popup" :show-close="false" image-width="100vw"></popup>
    <!--		下单之前询问用户的考试-->
    <popupPicker
      title="请选择你的考试"
      ref="examSelectPicker"
      :picker-option-list="[
        { value: '四级', label: '四级' },
        { value: '六级', label: '六级' },
      ]"
      :show-confirm-btn="true"
      v-model="userSelectExam"
      @change="
        (item) => {
          $log(item, 'item')
          persistence.userSelectExam.set(item.value)
          takeOrder()
        }
      "
      :required="true"
    ></popupPicker>
  </view>
</template>

<style scoped lang="scss">
.page {
  display: flex;
  flex-direction: column;
  padding-bottom: 20vh;
  > .title {
    width: 100vw;
  }
  > .content {
    width: 100vw;
    background: linear-gradient(180deg, #5cb683 0%, #e8faf0 100%);
    padding: {
      left: 20rpx;
      right: 20rpx;
      bottom: 30rpx;
    }
    .resource-list-container {
      padding: {
        top: 60rpx;
        left: 20rpx;
        right: 20rpx;
        bottom: 20rpx;
      }
      &.long {
        background: url("https://kou.gdzmtech.com/pic/ckY82PKRmtz6VymDs0r5.png") no-repeat;
        height: 934.52rpx;
        background-size: 100% 100%;
      }
      &.short {
        background: url("https://kou.gdzmtech.com/pic/f22VZqbkqRjpwJzzxDLB.png") no-repeat;
        height: 661.54rpx;
        background-size: 100% 100%;
      }
      .resource-list {
        overflow-y: auto;
        width: 100%;
        height: 100%;
        .resource-item {
          width: 100%;
          display: flex;
          align-items: center;
          padding: 16rpx 0;
          border-bottom: 1px solid #e5e5e5;
          .file-icon {
            width: 60rpx;
            height: 85rpx;
          }
          .text-container {
            width: 0;
            flex: 1;
            margin-left: 20rpx;
            .title {
              font-weight: bold;
              font-size: 30rpx;
            }
            .description {
              margin-top: 4rpx;
              font-size: 24rpx;
              color: #545454;
            }
          }
          .lock-icon-container {
            padding-right: 30rpx;
            .lock-icon {
              width: 40rpx;
            }
          }
          .copy-link-btn {
            color: #3a7ef7;
            border: 1px solid #3a7ef7;
            padding: 10rpx 20rpx;
            border-radius: 29rpx;
            font-size: 26rpx;
          }
        }
      }
    }
    .resource-hub-container {
      height: 345.08rpx;
      background: url("https://kou.gdzmtech.com/pic/343d72a163102d7d384b499dfab03e5.png") no-repeat;
      background-size: 100% 100%;
      padding: {
        top: 70rpx;
        left: 40rpx;
        right: 20rpx;
        bottom: 20rpx;
      }
      .content {
        display: flex;
        padding-bottom: 20rpx;
        border-bottom: 1px solid #e5e5e5;
        .icon-container {
          padding-top: 20rpx;
          .icon {
            width: 82rpx;
          }
        }
        .right {
          width: 0;
          flex: 1;
          margin-left: 20rpx;
          .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title {
              font-size: 32rpx;
              font-weight: bold;
            }
            .copy-btn {
              color: #ff3131;
              border: 1px solid #ff3131;
              padding: 10rpx 10rpx;
              border-radius: 32rpx;
              font-size: 28rpx;
            }
          }
          .info {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20rpx;
            width: 100%;
            .item {
              width: 50%;
              display: flex;
              align-items: center;
              margin-top: 8rpx;
              .icon {
                width: 26rpx;
              }
              .text {
                font-size: 26rpx;
                color: #545454;
                margin-left: 6rpx;
              }
            }
          }
        }
      }
      .footer {
        margin-top: 10rpx;
        font-size: 26rpx;
        color: #545454;
        text-align: right;
      }
    }
    .ad-banner-container {
      margin: {
        top: 30rpx;
        left: 30rpx;
        right: 30rpx;
      }
      .ad-banner {
        width: 100%;
      }
    }
  }
  > .poster {
    width: 100vw;
  }
  > .footer-btn {
    position: fixed;
    bottom: calc(50rpx + env(safe-area-inset-bottom));
    left: 0;
    width: 100vw;
    .btn {
      margin: 0 auto;
      padding: 24rpx 100rpx;
      width: max-content;
      border-radius: 48rpx;
      color: var(--text-color-white);
      background: linear-gradient(90deg, #ff3131 0%, #ff914d 100%);
      font-size: 36rpx;
      &.go-back-to-index {
        margin-top: 20rpx;
        background: var(--theme-color);
      }
      &.small {
        padding: 20rpx 60rpx;
        font-size: 28rpx;
      }
    }
  }
}
</style>
